<template>
  <div style="width: 100%">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown trigger="click">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
        
            <el-dropdown-item @click="fn_quit">退出登录</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
        <span>小明</span>
      </el-header>
      <!-- 内容表格 -->
      <el-main>
        <el-table
          :data="tableData"
          stripe
          height="500"
          @selection-change="fnchange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="date" label="Name" width="140">
          </el-table-column>
          <el-table-column prop="name" label="Age" width="120">
          </el-table-column>
          <el-table-column prop="address" label="Address"> </el-table-column>
        </el-table>
      </el-main>
      <!--  -->
    </el-container>
   <Mydialog title="新增人员1"
    :dialogFormVisible="dialogFormVisible"
    :formLabelWidth="formLabelWidth" 
    :form="form"
    @cuifn="newfnfu"
    @quxiaofn="ffqu"
   ></Mydialog>
  </div>
</template>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
<script>
import instance from "../api";
import Mydialog from './Mydialog.vue';
export default {
  components: { Mydialog },
  name: "All",
  Components:{
    Mydialog
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        name: "",
        date: "",
        address: "",
      },
      formLabelWidth: "50px",
    };
  },
  created() {
    this.fn_all(); //
  },
  methods: {
    ffqu(){
      this.dialogFormVisible=false
    },
    fn_quit() {
      console.log("111");
      localStorage.clear();
      this.$router.push({ name: "Login" });
    },
    // 往后台追加数据
    async newfnfu() {
      // 表单不能为空
      if (!this.form.name || !this.form.date || !this.form.address)
        return this.$message("内容不能为空");
      let name = this.form.name;
      let date = this.form.date;
      let address = this.form.address;
      // 后台增加一条数据
      await instance.post("tables", { name, date, address });
      this.fn_all();
      this.dialogFormVisible = false; //弹窗消失
    },
    //   新增出弹窗
    addfn() {
      console.log(111);
      this.dialogFormVisible = true;
    },
    //   数据请求
    async fn_all() {
      let { data } = await instance.get("tables");
      this.tableData = data;
    },
    async handleDelete(i, n) {
      console.log(i, n);
      await instance.delete("tables/" + n.id);
      this.fn_all(); //更新前端的数据
    },
    fnchange(val) {
      console.log(val);
    },
  },
};
</script>